import Link from 'next/link'
import SITE from '@/site.config'
import formatDate from '@/lib/formatDate'

const BlogPost = (props) => {
  // console.log("BlogPost---", props);
  const { post } = props
  return (
    <article key={post.id} className="card-shadow px-6 py-6 rounded-2xl mt-10">
      <div className="relative h-32 mb-2">
        <div className="cover-wrap absolute -mt-12 w-full h-40 rounded-2xl card-img-shadow bg-gray-100">
          {post.cover && <img src={post.cover} />}
        </div>
      </div>

      <div className="flex mb-3">
        {post.tags &&
          post.tags.map((tag, i) => {
            return (
              <span
                key={i}
                className={`text-sm leading-3 mr-2 px-3 py-1.5 block border rounded-full text-${tag.color}-600 bg-${tag.color}-200 border-${tag.color}-200 `}
              >
                {tag.value}
              </span>
            );
          })}
      </div>

      <header className="flex flex-col justify-between md:flex-row md:items-baseline">
        <Link href={`${SITE.path}/${post.slug}`}>
          <a>
            <h2 className="text-lg md:text-xl font-medium mb-2 cursor-pointer text-black dark:text-gray-100">
              {post.icon} {post.title}
            </h2>
          </a>
        </Link>
      </header>
      <time className="block py-2 text-gray-600 dark:text-gray-400">
        {formatDate(post?.date?.start_date || post.createdTime, SITE.lang)}
      </time>
      <main>
        <p className="hidden md:block leading-8 text-gray-700 dark:text-gray-300">
          {post.summary}
        </p>
      </main>
    </article>
  );
}

export default BlogPost
